<template>
    <div>
        <mt-header title="实名信息">
            <router-link to="/" slot="left">
                <mt-button  @click.native="goBackFun()"></mt-button>
            </router-link>
            <mt-button slot="right" @click="submitFun()">保存</mt-button>
        </mt-header>
        <div class="ID_pic_wrap">
            <ul>
                <li>
                    <img src="../../assets/images/id_face_pic@2x.png" >
                    <span class="cancel_btn" @click="delFun()"></span>
                    <input id="id_face_file" @change="uploadFile1" ref="files1" type="file">
                    <img id="showIdFaceSrc" :src="src1" alt="">
                </li>
                <li>
                    <img src="../../assets/images/id_behand_pic@2x.png" >
                    <span class="cancel_btn" @click="delFun()"></span>
                    <input id="id_behand_file" @change="uploadFile2"   ref="files2" type="file">
                    <img id="showIdbehandSrc" :src="src2" alt="">
                </li>
            </ul>
        </div>
        <div class="info_wrap">
            <form action="">
                <p><span>真实姓名<i>*</i></span><input name="realName" placeholder="请输入真实姓名" v-model="realName" type="text"></p>
                <p><span>身份证号<i>*</i></span><input v-model="IDNum" name="IDCardNo"  placeholder="请输入身份证号" maxlength="18"  type="text"></p>
                <p><span>邮箱<i>*</i></span><input v-model="eMail" name="email"  placeholder="请输入邮箱账号"  type="text"></p>
                <p><span>支付宝<i>*</i></span><input v-model="aliPayNum" name="aliPay"  placeholder="请输入支付宝账号"  type="text"></p>
                <p><span>微信<i>*</i></span><input v-model="wechatNum" name="weChat"  placeholder="请输入微信号" type="text"></p>
                <p><span>QQ<i>*</i></span><input v-model="QQNum" name="QQ"  placeholder="请输入QQ号码"  type="number"></p>
            </form>
        </div>
    </div>
</template>
<script>
export default {
    name:'realNameInfo',
    data() {
        return {
            flag:false,
            src1:'',
            src2:'',
            realName:'',
            IDNum:'',
            eMail:'',
            aliPayNum:'',
            wechatNum:'',
            QQNum:''
        }
    },
    methods: {
        goBackFun(){
            window.webkit.messageHandlers.realNameInfo.postMessage({});
        },
        uploadFile1(e){
            console.log(111)
            let _this = this;
            // console.log(e.target.files[0])
            if (!e || !window.FileReader) return  // 看支持不支持FileReader
            let reader = new FileReader()
            reader.readAsDataURL(e.target.files[0]) // 这里是最关键的一步，转换就在这里
            reader.onloadend = function () {
                _this.src1 = this.result
                console.log(_this.src1)
            }
        },
        uploadFile2(e){

            console.log(222)
            let _this = this;
            if (!e || !window.FileReader) return  // 看支持不支持FileReader
            // console.log(e.target.files[0]);
            let reader = new FileReader()
            reader.readAsDataURL(e.target.files[0]) // 这里是最关键的一步，转换就在这里
            reader.onloadend = function () {
                _this.src2 = this.result
                console.log(_this.src2)
            }
        },
        delFun(){
            console.log(this.src1 ,this.src2)

            if(this.src1){
                console.log(this.$refs.files1)
                this.src1 = "";
                this.$refs.files1.value="";
            }else if(this.src2){
                console.log(this.$refs.files2)
                this.src2 = "";
                this.$refs.files2.value="";
            }

        },
        submitFun(){
            let errMsg = '';
            if(!this.realName){
                errMsg = '姓名不能为空';
            }else if(!this.IDNum){
                errMsg = '身份证号不能为空';
            }else if(!/^(\d{15}$|^\d{18}$|^\d{17}(\d|X|x))$/.test(this.IDNum)){
                errMsg = '身份证号不正确';
            }else if( this.eMail && !/^[-_A-Za-z0-9\.]+@([_A-Za-z0-9]+\.)+[A-Za-z0-9]{2,3}$/.test(this.eMail)){
                errMsg = '邮箱不正确';
            }else if(this.QQNum && !/^[1-9][0-9]{4,9}$/.test(this.QQNum)){
                errMsg = 'QQ号码不正确';
            };

            if(errMsg != ''){
                this.$toast(errMsg);
                return 
            };

            let myFormData = new FormData();
            
            myFormData.append("files",this.$refs.files1.files[0],'files');
            myFormData.append("files",this.$refs.files2.files[0],'files');
            myFormData.append('realName',this.realName);
            myFormData.append('IDCardNo',this.IDNum);
            myFormData.append('email',this.eMail);
            myFormData.append('aliPay',this.aliPayNum);
            myFormData.append('weChat',this.wechatNum);
            myFormData.append('QQ',this.QQNum);

            let config = {
                headers: {'Content-Type': 'multipart/form-data'}
            };
            if(this.flag === false){
                console.log(111)
                this.flag === true;
                this.$Axios.post(`api/user/updateRealNameInfo`,myFormData,config).then((res)=>{
                    if(res.data.code === 0){
                        this.$toast("认证成功！")
                        this.flag === false;
                    }
                }).catch((err)=>{
                    console.log(err,"保存信息异常");
                    this.flag === false;
                })
            }

        }
    },
}
</script>
<style lang="scss" scoped>
.ID_pic_wrap{
    ul{
        display: flex;
        align-items: center;
        padding:50px 43px;
        background: #fff;
        li{
            width: 292px;
            height: 190px;
            position: relative;
            img{
                width: 292px;
                height: 190px;
                border-radius: 10px;

            }
            #showIdFaceSrc{
                position:absolute;
                top:0;
                left:0;
                border: none;
            }
            #showIdbehandSrc{
                position:absolute;
                top:0;
                left:0;
                border: none;
            }
            span{
                position: absolute;
                top:5px;
                right: 5px;
                z-index: 3;
                width: 36px;
                height: 36px;
                background: url("../../assets/images/del_icon@2x.png");
                background-size: contain;
            }
            input{
                position: absolute;
                bottom:0;
                left: 0;
                width: 80%;
                height: 100%;
                z-index: 2;
                opacity: 0;
            }
            &:last-child{
                margin-left: 80px;
            }
        }
    }
}
.info_wrap{
    padding:30px;
    margin: 30px auto 100px;
    background: #fff;
    p{
        height: 98px;
        font-size: 28px;
        border-bottom: 1px solid #f5f5f5;
        display: flex;
        span{
            flex: 1;
            line-height: 98px;
            font-size: 28px;
            i{
                color: red;
            }
        }
        input{
            flex: 1;
            font-size: 28px;
            height: 96px;
            padding: 0 15px;
        }
        &:last-child{
            border-bottom: none;
        }
    }
}  
</style>